<template>
  <div>
    <van-cell-group title="当前事项" align="left">
      <van-cell>
        <div class="current-item">
          <div class="location"><van-icon name="location" /> <span class="address">{{ currentAssignment.classroomName }}</span></div>
          <div class="mode">
            <span v-if="currentAssignment.assignmentSource===1">课堂模式</span>
            <span v-if="currentAssignment.assignmentSource===2">活动室模式</span>
          </div>
          <div class="title">
            <div class="name">{{ currentAssignment.assignmentSummary }}</div>
            <div class="section">第 {{ currentAssignment.section }} 节</div>
            <div style="margin: 10px;">
              <router-link :to="{ path: '/home/control', query: {classroomId: currentAssignment.classroomId} }">
                <span style="font-size: 10px; color: #eee">进入控制</span>
              </router-link>
            </div>
          </div>
          <div class="switch">
<!--            <a>切换事项</a>-->
          </div>
        </div>
      </van-cell>
    </van-cell-group>
    <van-cell-group title="预约列表">
      <van-cell v-for="(item, index) in assignments"
                :key="item.id"
                :title="item.assignmentSummary"
                :label="'第 ' + item.section + ' 节'"
                :data-index="index"
                center>
        <template #icon>
          <div class="date">
            <div class="day">{{ new Date(item.executionDate).getDate() }}</div>
            <div class="month">{{ new Date(item.executionDate).getMonth() + 1 }} 月</div>
          </div>
        </template>
        <template #title>
          <div class="item-title">{{ item.assignmentSummary }}</div>
        </template>
        <template #right-icon>
          <van-button type="info" plain @click="toControl" color="#1fc8db" :data-id="index">切换</van-button>
        </template>
      </van-cell>

    </van-cell-group>
  </div>
</template>

<script>
import { Toast } from 'vant';
import {getAssignmentsByUser} from "@/api/assignment";

export default {
  name: "HomePage",
  data() {
    return {
      active: 0,
      currentAssignment: {
        id: 1,
        assignmentSummary: '19级计科 - 数据结构',
        executionDate: '2021-10-20',
        section: 2,
        classroomId: 1,
        classroomName: "笃行楼101",
        assignmentSource: 1,
      },
      assignments: [
        {
          id: 1,
          assignmentSummary: '19级计科 - 数据结构',
          executionDate: '2021-10-20',
          section: 2,
          classroomId: 1,
          classroomName: "笃行楼101",
          assignmentSource: 1,
        },
        {
          id: 2,
          assignmentSummary: '20级电子 - C语言',
          executionDate: '2021-10-21',
          section: 1,
          classroomId: 2,
          classroomName: "笃行楼101",
          assignmentSource: 1,
        },
        {
          id: 3,
          assignmentSummary: '20级电子 - C语言',
          executionDate: '2021-10-20',
          section: 3,
          classroomId: 1,
          classroomName: "笃行楼101",
          assignmentSource: 1,
        },
        {
          id: 4,
          assignmentSummary: '18级信管 - 大数据开发',
          executionDate: '2021-10-20',
          section: 3,
          classroomId: 1,
          classroomName: "笃行楼101",
          assignmentSource: 1,
        }
      ],
    };
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      let user = 'admin'
      getAssignmentsByUser(user).then()
    },
    onClickLeft() {
      Toast('返回');
    },
    onClickRight() {
      Toast('按钮');
    },
    toControl(event) {
      let index = event.currentTarget.getAttributeNode('data-id').value
      console.log(index)

      console.log(this.getSection())

      let date1 = new Date().toDateString();
      let date2 = new Date(this.assignments[index].executionDate).toDateString();

      let section = this.getSection()

      if(date1 === date2) {
        if(section === this.assignments[index].section) {
          this.currentAssignment = this.assignments[index]
        } else {
          Toast.fail("未到达预约时间")
        }
      } else {
        Toast.fail("未到达预约日期")
      }
    },

    getSection() {
      const hour = new Date().getHours();
      const minute = new Date().getMinutes();

      let sessions = 0;
      if (hour === 9) {
        sessions = 1;
      }
      if (hour === 10) {
        if (minute <= 30) {
          sessions = 1;
        } else {
          sessions = 2;
        }
      }
      if (hour === 11) {
        sessions = 2;
      }

      if (hour === 14) {
        sessions = 3;
      }

      if (hour === 15) {
        if (minute <= 30) {
          sessions = 3;
        } else {
          sessions = 4;
        }
      }
      if (hour === 16) {
        sessions = 4;
      }

      console.log(sessions + 'saaa')
      return sessions;
    }
  },

}
</script>

<style scoped>
.current-item {
  position: relative;
  width: 100% - 10px;
  height: 200px;
  padding: 20px;
  border-radius: 10px;
  color: #eeeeee;
  background: #2cb5e8;
  background: linear-gradient(141deg, #0fb8ad 0%, #1fc8db 65%, #1989fa 95%);
  /*background:-moz-linear-gradient(top, #71e7f1, #50f0b4);*/
  /*background:-webkit-gradient(linear, 0 0, 0 bottom, from(#71e7f1), to(#50f0b4));*/
}

.current-item .location {
  position: absolute;
  height: 18px;
  font-size: 18px;
  line-height: 18px;
}

.current-item .location .address {
  position: relative;
  top: -2px;
}

.current-item .mode {
  position: absolute;
  height: 18px;
  right: 20px;
  font-size: 18px;
  top: 18px;
}
.current-item .title {
  text-align: center;
  height: 164px;
  padding: 18px 0;
}

.current-item .title .name {
  font-size: 30px;
  height: 40px;
  line-height: 40px;
  padding: 30px 0 10px 0;
}

.current-item .title .section {
  font-size: 24px;
  margin: 10px 0;
}

.current-item .switch {
  position: absolute;
  right: 20px;
  bottom: 20px;
}

.date {
  position: relative;
  width: 50px;
  height: 50px;
  color: #1fc8db;
}

.date .day {
  position: absolute;
  width: 50px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  font-size: 20px;
}

.date .month {
  position: absolute;
  width: 50px;
  height: 20px;
  line-height: 20px;
  bottom: 0;
  text-align: center;
  font-size: 16px;
}

.item-title {
  color: #777777;
  font-weight: bold;
  font-size: 18px;
}
</style>